<!DOCTYPE html>
<html xmlns:text-align="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->


</head>
<body style="width:100%;height:500px">
<section class="el-container  is-vertical" style="height:100%;width: 100%">
    <div class="el-header" style="width: 100%;height: 10%;background: #8c939d;text-align: right">
        <label style="margin-top: 1%;float:right;">文件处理</label>
    </div>
    <div class="el-main" style="width: 100%;height: 90%">
        <div id="app">

            <el-row :gutter="40" style="width: 100%">
                <el-col :span="12">
                    <el-upload
                            action="http://localhost:8090/uploadImg"
                            list-type="picture-card"
                            :on-success="handleUploadSuccess"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-image :src="realImgUrl"></el-image>
                </el-col>
                <el-col :span="12">
                    <div>处理工具</div>

                </el-col>

            </el-row>
            <el-row :gutter="40">
                <el-button v-on:click="playRtsp">播放</el-button>
                <el-input v-model="rtspUrl" placeholder="请输入内容"></el-input>
                <video id="video"></video>


            </el-row>

        </div>
    </div>
    </div>
</section>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {

            //上传后的文件地址
            url: 'http://localhost:8090/getImage',
            dialogVisible: false,
            urlData: '',
            rtspUrl: '',
            rtmpUrl: ''

        },
        computed: {
            realImgUrl: function () {
                return this.url + this.urlData;
            }
        },

        methods: {
            handleRemove: function (file, fileList) {
                console.log(file, fileList);
            },
            handleUploadSuccess: function (file) {
                let time = new Date();
                let tmp = "?time=" + time;
                this.urlData = tmp;
            },
            sleep: function (n) {

                let start = new Date().getTime();

                while (true) if (new Date().getTime() - start > n) break;

            },
            playRtsp: function () {

                let data = {
                    url: this.rtspUrl
                };
                let _this = this;
                let postData = JSON.stringify(data);

                let xhr = new XMLHttpRequest();
                xhr.open("POST", "http://localhost:8090/playRtsp", false);
                xhr.setRequestHeader("Content-type", "application/json");
                xhr.onreadystatechange = function () {
                    var XMLHttpReq = xhr;
                    if (XMLHttpReq.readyState == 4) {
                        if (XMLHttpReq.status == 200) {
                            let text = XMLHttpReq.responseText;

                            _this.rtmpUrl = 'http://localhost:10003/hls/' + text;

                        }
                    }
                };
                xhr.send(postData);
                _this.sleep(30*1000);
                if (Hls.isSupported()) {

                    var video = document.getElementById('video'); // 获取 video 标签
                    var hls = new Hls(); // 实例化 Hls 对象
                    debugger
                    hls.loadSource(_this.rtmpUrl + '.m3u8'); // 传入路径
                    console.log(_this.rtmpUrl+".m3u8");
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        video.play(); // 调用播放 API
                    });
                }

            }
        }
    })
</script>
</body>


</html>